<template>
    <div class="common-layout">
        <el-container>
            <el-main class="main-content">
                <div class="center-content">
                    <img src="../../assets/wenzi.png" class="logo" />
                    <div class="buttons" v-if="!getToken()">
                        <div class="denglu" @click="denglu">
                            我要登录
                        </div>
                        <div class="zhuce" @click="zhuce">
                            手机登录/注册
                        </div>
                    </div>
                    <div class="download-links">
                        <div class="apple" @click="tanchu('安卓端下载')">安卓端下载</div>
                        <div class="apple" @click="tanchu('苹果端下载')">苹果端下载</div>
                    </div>
                </div>
            </el-main>
        </el-container>
        <el-dialog :title="title" v-model="open" width="400px" append-to-body>
            <vue-qr :text="text" :size="350" />
        </el-dialog>
        <Denglu @doClose="commoditydetailsClose" :dialogInfoVisible="dialogInfoVisible" :loginType="type" :title="titles"></Denglu>
    </div>
</template>

<script setup lang="ts">
import { getToken } from '@/utils/auth';
import { useRouter } from 'vue-router'
import { getQrs } from '@/api/index'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import Denglu from '@/components/Denglu/index.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter()
const open = ref(false)
const title = ref()
const text = ref()
const dialogInfoVisible = ref(false);
const type = ref()
const titles = ref()
/** 登录 */
const denglu = () => {
    if (!getToken()) {
        dialogInfoVisible.value = true
        type.value = 'account'
        titles.value = '学号登录'
    } else {
        proxy?.$modal.msgWarning('您已登录！')
    }
}
/** 关闭 */
const commoditydetailsClose = () => {
    dialogInfoVisible.value = false;
};
/** 注册 */
const zhuce = () => {
    dialogInfoVisible.value = true
    type.value = 'mobile'
    titles.value = '手机登录/快捷注册'
}
const tanchu = async (titles: any) => {
    const res = await getQrs()
    if (titles == '安卓端下载') {
        text.value = res.data.androidUrl
    } else {
        text.value = res.data.iosUrl
    }
    open.value = true
    title.value = titles
}
</script>

<style scoped lang="scss">
.common-layout,
.el-container {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100vw;
    background: url('@/assets/back.jpg');
    background-size: cover;

    .main-content {
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
        color: #fff;
        padding: 0px !important;

        .center-content {
            .logo {
                width: 468px;
                height: 71px;
            }

            .buttons {
                display: flex;
                align-items: center;
                width: 100%;
                margin-top: 82px;

                .denglu {
                    width: 299px;
                    height: 74px;
                    background: url('../../assets/zhuce.png') no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 30px;
                    cursor: pointer;
                    font-size: 28px;
                    letter-spacing: 7px;


                    img {
                        width: 138px;
                        height: 30px;
                    }
                }

                .zhuce {
                    width: 299px;
                    height: 74px;
                    background: url('../../assets/denglu.png') no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    font-size: 28px;
                    letter-spacing: 7px;

                    img {
                        width: 138px;
                        height: 30px;
                    }
                }
            }

            .download-links {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #FFFFFF;
                margin-top: 88px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .apple {
                    cursor: pointer;
                }
            }

        }
    }
}

/* 移除全局边距 */
body {
    margin: 0;
}
</style>